<html><head><title>ReaderLayout.js</title><link rel="stylesheet" type="text/css" href="../resources/style.css" media="screen"/></head><body><h1>ReaderLayout.js</h1><pre class="highlighted"><code><i>/**
 * @class Ext.ReaderLayout
 * @extends Ext.BorderLayout
 * This is a pre-built layout that represents a classic, 5-pane application.  It consists of a header, a primary
 * center region containing two nested regions (a top one <b>for</b> a list view and one <b>for</b> item preview below),
 * and regions on either side that can be used <b>for</b> navigation, application commands, informational displays, etc.
 * The setup and configuration work exactly the same as it does <b>for</b> a {@link Ext.BorderLayout} - <b>this</b> class simply
 * expedites the setup of the overall layout and regions <b>for</b> this common application style.
 * Example:
 &lt;pre&gt;&lt;code&gt;
<b>var</b> reader = <b>new</b> Ext.ReaderLayout();
<b>var</b> CP = Ext.ContentPanel;  <i>// shortcut <b>for</b> adding</i>

reader.beginUpdate();
reader.add(&quot;north&quot;, <b>new</b> CP(&quot;north&quot;, &quot;North&quot;));
reader.add(&quot;west&quot;, <b>new</b> CP(&quot;west&quot;, {title: &quot;West&quot;}));
reader.add(&quot;east&quot;, <b>new</b> CP(&quot;east&quot;, {title: &quot;East&quot;}));

reader.regions.listView.add(<b>new</b> CP(&quot;listView&quot;, &quot;List&quot;));
reader.regions.preview.add(<b>new</b> CP(&quot;preview&quot;, &quot;Preview&quot;));
reader.endUpdate();
&lt;/code&gt;&lt;/pre&gt;
* @constructor
* Create a <b>new</b> ReaderLayout
* @param {Object} config Configuration options
* @param {String/HTMLElement/Element} container (optional) The container <b>this</b> layout is bound to (defaults to
* document.body <b>if</b> omitted)
*/</i>
Ext.ReaderLayout = <b>function</b>(config, renderTo){
    <b>var</b> c = config || {size:{}};
    Ext.ReaderLayout.superclass.constructor.call(<b>this</b>, renderTo || document.body, {
        north: c.north !== false ? Ext.apply({
            split:false,
            initialSize: 32,
            titlebar: false
        }, c.north) : false,
        west: c.west !== false ? Ext.apply({
            split:true,
            initialSize: 200,
            minSize: 175,
            maxSize: 400,
            titlebar: true,
            collapsible: true,
            animate: true,
            margins:{left:5,right:0,bottom:5,top:5},
            cmargins:{left:5,right:5,bottom:5,top:5}
        }, c.west) : false,
        east: c.east !== false ? Ext.apply({
            split:true,
            initialSize: 200,
            minSize: 175,
            maxSize: 400,
            titlebar: true,
            collapsible: true,
            animate: true,
            margins:{left:0,right:5,bottom:5,top:5},
            cmargins:{left:5,right:5,bottom:5,top:5}
        }, c.east) : false,
        center: Ext.apply({
            tabPosition: <em>'top'</em>,
            autoScroll:false,
            closeOnTab: true,
            titlebar:false,
            margins:{left:c.west!==false ? 0 : 5,right:c.east!==false ? 0 : 5,bottom:5,top:2}
        }, c.center)
    });

    <b>this</b>.el.addClass(<em>'x-reader'</em>);

    <b>this</b>.beginUpdate();

    <b>var</b> inner = <b>new</b> Ext.BorderLayout(Ext.get(document.body).createChild(), {
        south: c.preview !== false ? Ext.apply({
            split:true,
            initialSize: 200,
            minSize: 100,
            autoScroll:true,
            collapsible:true,
            titlebar: true,
            cmargins:{top:5,left:0, right:0, bottom:0}
        }, c.preview) : false,
        center: Ext.apply({
            autoScroll:false,
            titlebar:false,
            minHeight:200
        }, c.listView)
    });
    <b>this</b>.add(<em>'center'</em>, <b>new</b> Ext.NestedLayoutPanel(inner,
            Ext.apply({title: c.mainTitle || <em>''</em>,tabTip:<em>''</em>},c.innerPanelCfg)));

    <b>this</b>.endUpdate();

    <b>this</b>.regions.preview = inner.getRegion(<em>'south'</em>);
    <b>this</b>.regions.listView = inner.getRegion(<em>'center'</em>);
};

Ext.extend(Ext.ReaderLayout, Ext.BorderLayout);</code></pre><hr><div style="font-size:10px;text-align:center;color:gray;">Ext - Copyright &copy; 2006-2007 Ext JS, LLC<br />All rights reserved.</div>
    </body></html>